<template>
  <div>
    <el-row>
      <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
        <h1>
          <icon class="iconfont" name="news"></icon>
          <a>快看新闻</a>
        </h1>
      </el-col>
      <div class="menuview">
        <el-col :xs="24" :sm="12" :md="16" :lg="12" :xl="8">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            active-text-color="#0984e3"
            text-color="#2d3436"
          >
            <el-menu-item index="1" @click="showStatus = false"
              ><router-link :to="'/home'" style="text-decoration: none"
                >主页</router-link
              ></el-menu-item
            >
            <el-menu-item index="2" @click="showStatus = true"
              ><router-link :to="'/newsmap'" style="text-decoration: none"
                >新闻热力图</router-link
              ></el-menu-item
            >
            <el-menu-item index="3" @click="showStatus = true" disabled>
              <!-- <router-link :to="'/epidemic'" style="text-decoration: none" >疫情相关</router-link> -->
            疫情相关</el-menu-item>
            <el-menu-item index="4" @click="showStatus = true">
              <router-link :to="'/set'" style="text-decoration: none"
                >设置</router-link
              >
            </el-menu-item>
            <el-menu-item index="5" disabled>消息中心</el-menu-item>
            <el-submenu index="7">
              <template slot="title">
                <el-avatar size="medium" :src="circleUrl"></el-avatar>
              </template>
              <el-menu-item index="7-1">
                <router-link :to="'/'" style="text-decoration: none"
                  ><p @click="exit">退出</p></router-link
                ></el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-col>
        <el-col :xs="24" :sm="12" :md="4" :lg="6" :xl="4">
          <el-input
            placeholder="请输入搜索关键词"
            suffix-icon="el-icon-search"
            v-model="keywords"
            disabled
          ></el-input>
        </el-col>
      </div>
    </el-row>

    <el-row v-if="showStatus">
      <el-col :span="24"
        ><div>
          <router-view /></div
      ></el-col>
    </el-row>

    <div v-if="!showStatus">
      <el-row>
        <!-- 轮播图 -->
        <div class="index">
          <el-col :span="24">
            <el-carousel
              :interval="4000"
              type="card"
              :height="bannerHeight + 'px'"
            >
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <img
                  :src="item.url"
                  class="image"
                  :height="bannerHeight + 'px'"
                />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </div>
      </el-row>

      <el-row>
        <div class="app">
          <div
            class="newsbox"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="10"
          >
            <ol class="newslist">
              <li
                v-for="(news, index) in newsList"
                :key="index"
                class="list-item"
              >
                <h3>
                  <a :href="getUrl(news)">{{ news.title }}</a>
                </h3>
                <p>
                  <span>{{ news.place }}</span>
                  <span>{{ news.time.substring(0, 10) }}</span>
                </p>
              </li>
            </ol>
            <p
              style="height: 20px"
              v-if="loading"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            ></p>
            <p v-if="noMore" style="color: red;">没有更多了</p>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      place: "四川",
      imgList: [
        { id: 1, url: require("@/assets/images/carousel1.jpg") },
        { id: 2, url: require("@/assets/images/carousel2.jpg") },
        { id: 3, url: require("@/assets/images/carousel3.jpg") },
        { id: 4, url: require("@/assets/images/carousel4.jpg") }
      ],
      circleUrl:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      bannerHeight: 300,
      screenWidth: 0,
      showStatus: false,
      activeIndex: "1",
      keywords: "",
      loading: true,
      newsList: [],
      index: 1,
      items: 0,
      page: 1,
      size: 10,
      busy: true,
      more: false,
      gethead: "",
      // imgobj: localStorage.getItem("headimg"),
      places: [
        "北京",
        "天津",
        "上海",
        "重庆",
        "河北",
        "山西",
        "辽宁",
        "吉林",
        "黑龙江",
        "江苏",
        "浙江",
        "安徽",
        "福建",
        "江西",
        "山东",
        "河南",
        "湖北",
        "湖南",
        "广东",
        "海南",
        "四川",
        "贵州",
        "云南",
        "陕西",
        "甘肃",
        "青海",
        "内蒙古",
        "广西",
        "宁夏"
      ], //新疆，西藏
      cityCode: [
        "bj",
        "tj",
        "sh",
        "cq",
        "he",
        "sx",
        "ln",
        "jl",
        "hlj",
        "js",
        "zj",
        "ah",
        "fj",
        "jx",
        "sd",
        "ha",
        "hb",
        "hn",
        "gd",
        "hi",
        "sc",
        "gz",
        "yn",
        "sn",
        "gs",
        "qh",
        "nmg",
        "gx",
        "nx"
      ] //29
    };
  },

  computed: {
    noMore() {
      return this.more;
    }
  },
  created() {
    let that = this;
    this.$axios
      .get("http://1.117.99.174:8080/newsmap/news/getAll", {
        params: {
          page: that.page,
          size: that.size
        }
      })
      .then(function(response) {
        let pageInfo = response.data;
        pageInfo.data.forEach(function(item) {
          that.newsList.push(item);
        });
        that.items = response.data.count;
        that.index += 1;
        that.page += 1;
        that.busy = false;
      })
      .catch(function(error) {
        console.log(error);
      });
    that.getImg();
  },
  mounted() {
    this.screenWidth = window.innerWidth;
    this.setSize();
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    };
    this.gethead = setInterval(this.getImg, 3000);
  },
  // watch: {
  //   imgobj(val) {
  //     console.log("aaaaass")
  //     this.circleUrl = localStorage.getItem("headimg");
  //   }
  // },
  methods: {
    getImg() {
      let headimg = localStorage.getItem("headimg");
      if (headimg) {
        this.circleUrl = "data:image/png;base64," + headimg;
      } else {
        this.circleUrl =
          "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
      }
    },
    getUrl(news) {
      if (news.url.length < 32) {
        let place = news.place;
        for (var i = 0; i < this.places.length; i++) {
          if (place == this.places[i]) {
            place = this.cityCode[i];
          }
        }
        return "https://difang.gmw.cn/" + place + "/" + news.url;
      } else {
        return news.url;
      }
    },
    exit() {
      localStorage.removeItem("id");
      localStorage.removeItem("headimg");
      localStorage.removeItem("username");
      localStorage.removeItem("password");
      localStorage.removeItem("phone");
      clearInterval(this.gethead);
      this.$message({
        showClose: true,
        message: "退出成功",
        type: "success"
      });
    },
    // handleSelect(key, keyPath) {
    //   console.log(key, keyPath);
    // },
    setSize() {
      this.bannerHeight = (400 / 1920) * this.screenWidth;
    },
    loadMore: function() {
      var self = this;
      self.busy = true;
      setTimeout(function() {
        var target = document.querySelector(".newsbox");
        var height = target.clientHeight;
        target.style.height = height + 1300 + "px";
        let that = self;
        self.$axios
          .get("http://1.117.99.174:8080/newsmap/news/getAll", {
            params: {
              page: that.page,
              size: that.size
            }
          })
          .then(function(response) {
            if (!response.data) {
              that.more = true;
            } else {
              let pageInfo = response.data;
              pageInfo.data.forEach(function(item) {
                that.newsList.push(item);
              });
              that.page += 1;
              that.index += 1;
              that.busy = false;
            }
          })
          .catch(function(error) {
            console.log(error);
          });
        self.busy = false;
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
h1 {
  margin: 0;
  float: left;
  font-size: 2em;
  font-weight: 500;
  padding: 10px;
  a {
    color: #409eff;
    text-decoration: none;
  }
  .iconfont {
    width: 40px;
    height: 25px;
    fill: currentColor; //此属性为更改svg颜色属性设置
    overflow: hidden;
  }
}
.el-menu {
  background: none;
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-input {
  margin: 10px 0px;
}
.app {
  // border: 1px solid red;
  width: 800px;
  height: 1000px;
  margin: 0 auto;
  overflow: auto;
  // border: 1px solid red;
}
.newsbox {
  width: 80%;
  height: 1300px;
  margin: 0 auto;
}
.list-item {
  position: relative;
  width: 500px;
  display: list-item;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  list-style: none;
  padding: 0 1rem;
  box-sizing: border-box;
  height: 130px;
  border-bottom: 1px solid #e7e7e7;
}
.list-item > h3 > a:hover {
  color: #74b9ff;
}
.list-item > h3 > a {
  text-decoration: none;
  color: #333333;
  font: 20px/29px "微软雅黑";
  font-weight: 900;
}
.list-item p {
  position: absolute;
  bottom: 0;
  float: left;
}
.list-item p > span {
  padding: 20px;
  color: #999;
  font-size: 12px;
}
.list-item p > span:hover {
  cursor: pointer;
}
.loading span {
  width: 20px;
  height: 20px;
  border: 2px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsbox p {
  text-align: center;
}
</style>
